import path from 'path';

const animate = require('tailwindcss-animate');
const { addDynamicIconSelectors } = require('@iconify/tailwind');
const tailwindcssPlugin = require('tailwindcss/plugin');
const cssMacro = require('weapp-tailwindcss/css-macro');
const { isMp } = require('./platform');

const resolve = (p) => {
	return path.resolve(__dirname, p);
};

/** @type {import('tailwindcss').Config} */
module.exports = {
	darkMode: ['class'],
	safelist: ['dark'],
	corePlugins: {
		preflight: !isMp,
	},
	content: ['./index.html', './**/*.vue'].map(resolve),

	theme: {
		extend: {
			colors: {},
		},
	},
	plugins: [
		animate,
		addDynamicIconSelectors(),
		require('tailwind-scrollbar')({ preferredStrategy: 'pseudoelements', nocompatible: true }),
		require('@tailwindcss/typography'),
		require('tailwindcss-animate'),
		cssMacro({
			variantsMap: {
				wx: 'MP-WEIXIN',
				'-wx': {
					value: 'MP-WEIXIN',
					negative: true,
				},
				'app-plus': 'APP-PLUS',
				'-app-plus': {
					value: 'APP-PLUS',
					negative: true,
				},
				h5: 'H5',
				'-h5': {
					value: 'H5',
					negative: true,
				},
			},
		}),
		tailwindcssPlugin(function ({ addUtilities, addVariant, matchUtilities, theme }) {
			addUtilities(adminUtilities);
			addUtilities({
				'.flex-col-center': {
					display: 'flex',
					'align-items': 'center',
					'justify-content': 'center',
					'flex-direction': 'column',
				},
				'.flex-center': {
					display: 'flex',
					'align-items': 'center',
					'justify-content': 'center',
					'flex-direction': 'row',
				},
				'.all-unset': {
					all: 'unset',
				},
				'.borurio-panel': {
					'background-color': 'white',
					'border-radius': '10px',
					padding: '10px',
				},
				'.status-bar-height': {
					height: 'var(--status-bar-height)',
				},
				'.form-panel': {
					'background-color': 'white',
					'border-radius': '10px',
					padding: '16px 10px',
				},
				'.footer-icon-wrap': {
					display: 'flex',
					flex: '1 1 0%',
					'align-items': 'flex-start',
					'padding-top': '0.875rem',
					height: '75px',
				},
			});
		}),
	],
};

const adminUtilities = {
	'.flex-center': {
		display: 'flex',
		'align-items': 'center',
		'justify-content': 'center',
	},
	'.flex-x-center': {
		display: 'flex',
		'justify-content': 'center',
	},
	'.flex-y-center': {
		display: 'flex',
		'align-items': 'center',
	},
	'.flex-col': {
		display: 'flex',
		'flex-direction': 'column',
	},
	'.flex-col-center': {
		display: 'flex',
		'flex-direction': 'column',
		'align-items': 'center',
		'justify-content': 'center',
	},
	'.flex-col-stretch': {
		display: 'flex',
		'flex-direction': 'column',
		'align-items': 'stretch',
	},
	'.i-flex-center': {
		display: 'inline-flex',
		'align-items': 'center',
		'justify-content': 'center',
	},
	'.i-flex-x-center': {
		display: 'inline-flex',
		'justify-content': 'center',
	},
	'.i-flex-y-center': {
		display: 'inline-flex',
		'align-items': 'center',
	},
	'.i-flex-col': {
		display: 'inline-flex',
		'flex-direction': 'column',
	},
	'.i-flex-col-center': {
		display: 'inline-flex',
		'flex-direction': 'column',
		'align-items': 'center',
		'justify-content': 'center',
	},
	'.i-flex-col-stretch': {
		display: 'inline-flex',
		'flex-direction': 'column',
		'align-items': 'stretch',
	},
	'.flex-1-hidden': {
		display: 'flex',
		'flex-1': '0 1 auto',
		overflow: 'hidden',
	},
	'.absolute-lt': {
		position: 'absolute',
		left: '0',
		top: '0',
	},
	'.absolute-lb': {
		position: 'absolute',
		left: '0',
		bottom: '0',
	},
	'.absolute-rt': {
		position: 'absolute',
		right: '0',
		top: '0',
	},
	'.absolute-rb': {
		position: 'absolute',
		right: '0',
		bottom: '0',
	},
	'.absolute-center': {
		position: 'absolute',
		left: '0',
		top: '0',
		display: 'flex',
		'align-items': 'center',
		'justify-content': 'center',
		width: '100%',
		height: '100%',
	},
	'.fixed-lt': {
		position: 'fixed',
		left: '0',
		top: '0',
	},
	'.fixed-lb': {
		position: 'fixed',
		left: '0',
		bottom: '0',
	},
	'.fixed-rt': {
		position: 'fixed',
		right: '0',
		top: '0',
	},
	'.fixed-rb': {
		position: 'fixed',
		right: '0',
		bottom: '0',
	},
	'.fixed-center': {
		position: 'fixed',
		left: '0',
		top: '0',
		display: 'flex',
		'align-items': 'center',
		'justify-content': 'center',
		width: '100%',
		height: '100%',
	},
	'.nowrap-hidden': {
		overflow: 'hidden',
		'white-space': 'nowrap',
	},
	'.ellipsis-text': {
		overflow: 'hidden',
		'white-space': 'nowrap',
		'text-overflow': 'ellipsis',
	},
};
